<template>
  <div class="dashboard-editor-container">
    <div class=" clearfix">
      <pan-thumb :image="avatar" style="float: left">
        你的权限:
        <span v-for="item in roles" :key="item" class="pan-info-roles">{{ item }}</span>
      </pan-thumb>
      <github-corner style="position: absolute; top: 0px; border: 0; right: 0;" />
      <div class="info-container">
        <span class="display_name">{{ name }}</span>
        <span style="font-size:20px;padding-top:20px;display:inline-block;">iNetLab，您的智慧产业专家</span>
      </div>
    </div>
    <!--    <div>-->
    <!--      <img :src="emptyGif" class="emptyGif">-->
    <!--    </div>-->
    <el-row style="margin-top: 20px">
      <el-col v-for="(o, index) in cardList" :key="o" :span="6" :offset="0">
        <el-card class="quickvisit-card" :body-style="{ padding: '0px' }" shadow="hover">
          <img :src="o.cover_url" class="image">
          <div style="padding: 14px;">
            <span style="font-size: large;font-weight: bolder;color: #4d4d4d">{{ o.title }}</span>
            <div class="bottom clearfix">
              <el-button type="text" class="button" @click="goto(o.path)">快速前往<i class="el-icon-right" /></el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import PanThumb from '@/components/PanThumb'
import GithubCorner from '@/components/GithubCorner'
export default {
  name: 'DashboardEditor',
  components: { PanThumb, GithubCorner },
  data() {
    return {
      // emptyGif: 'https://wpimg.wallstcn.com/0e03b7da-db9e-4819-ba10-9016ddfdaed3'
      cardList: [
        {
          title: '任务大厅',
          path: '/tasks-panel/task-center',
          cover_url: 'http://inetujs.oss-cn-hangzhou.aliyuncs.com/system_files/dashboard-cover/task_cover.jpg'
        },
        {
          title: '结晶标记',
          path: '/control-panel/unary-crystal-labelling',
          cover_url: 'http://inetujs.oss-cn-hangzhou.aliyuncs.com/system_files/dashboard-cover/search_cover.jpg'
        },
        {
          title: '模型生成',
          path: '/control-panel/model-generating',
          cover_url: 'http://inetujs.oss-cn-hangzhou.aliyuncs.com/system_files/dashboard-cover/model_cover.png'
        },
        {
          title: '健康诊断',
          path: '/control-panel/health-diagnose',
          cover_url: 'http://inetujs.oss-cn-hangzhou.aliyuncs.com/system_files/dashboard-cover/diagnose_cover.jpg'
        },
        {
          title: '文件管理',
          path: '/oss-filesystem/file-manage',
          cover_url: 'http://inetujs.oss-cn-hangzhou.aliyuncs.com/system_files/dashboard-cover/file_cover.jpg'
        }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles'
    ])
  },
  methods: {
    goto(path) {
      this.$router.push(path)
    }
  }
}
</script>

<style lang="scss" scoped>
  .emptyGif {
    display: block;
    width: 45%;
    margin: 0 auto;
  }

  .dashboard-editor-container {
    //background-color: #e3e3e3;
    min-height: 100vh;
    padding: 50px 60px 0px;
    .pan-info-roles {
      font-size: 12px;
      font-weight: 700;
      color: #333;
      display: block;
    }
    .info-container {
      position: relative;
      margin-left: 190px;
      height: 150px;
      line-height: 200px;
      .display_name {
        font-size: 48px;
        line-height: 48px;
        color: #212121;
        position: absolute;
        top: 25px;
      }
    }
    .quickvisit-card{
      margin-top: 10px;
      height: 380px;
      width: 300px
    }
    .time {
      font-size: 13px;
      color: #999;
    }

    .bottom {
      margin-top: 13px;
      line-height: 12px;
    }

    .button {
      padding: 0;
      float: right;
    }

    .image {
      width: 300px;
      height: 300px;
      display: block;
      object-fit: cover;
    }

    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }

    .clearfix:after {
      clear: both
    }
  }
</style>
